import axios from 'axios'
import React, { useState, useEffect } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import './index.css'
import { aUrl } from '../../../static/axios_url'
import { message } from 'antd'
export default function Mybill() {
    const bill_type = ['全部', '代付款', '代发货', '待收货', '待评价', '退款/售后', '已完成/关闭']
    const [mybill, setmybill] = useState([])
    const [billData, setbillData] = useState([])
    useEffect(() => {
        document.querySelector('.bill_type span:first-of-type').className = 'check'
        axios.post(aUrl + '/mycenter/myBill').then(res => {
            setmybill(res.data);
            setbillData(res.data);
        })
    }, [])
    //筛选搜索函数
    function billTypeClick(num) {
        return () => {
            const billTypeSpan = document.querySelectorAll('.bill_type span')
            for (var i = 0; i < billTypeSpan.length; i++) {
                billTypeSpan[i].className = ''
            }
            billTypeSpan[num].className = 'check'
            var bills = []
            if (num === 0) {
                bills = [...billData]
            } else {
                billData.forEach(v => {
                    if (v.b_type === num) {
                        bills.push(v)
                    }
                })
            }
            setmybill(bills)
        }
    }
    //支付函数
    function pay(b_id, pay) {
        return () => {
            axios.post(aUrl + '/mycenter/pay', { b_id, pay }).then(res => {
                if (res.data.code === 1) {
                    message.success('支付成功！！！')
                    const newbillData = [...billData]
                    newbillData.forEach((v) => {
                        if (v.b_id === b_id) {
                            v.b_type = 2;
                            v.b_site = '代发货'
                        }
                    })
                    setmybill(newbillData)
                }
            })
        }
    }
    //退款函数
    function refund(b_id, pay) {
        return () => {
            axios.post(aUrl + '/mycenter/refund', { b_id, pay }).then(res => {
                if (res.data.code === 1) {
                    message.success('退款成功！！！')
                    const newbillData = [...billData]
                    newbillData.forEach((v) => {
                        if (v.b_id === b_id) {
                            v.b_type = 5;
                            v.b_site = '已退款'
                        }
                    })
                    setmybill(newbillData)
                }
            })
        }
    }
    //删除订单
    function delbill(b_id) {
        return () => {
            axios.post(aUrl + '/mycenter/delbill', { b_id }).then(res => {
                if (res.data.code === 1) {
                    message.success('退款成功！！！')
                    const newbillData = [...billData]
                    newbillData.forEach((v, i) => {
                        if (v.b_id === b_id) {
                            newbillData.splice(i, 1)
                        }
                    })
                    setmybill(newbillData)
                }
            })
        }
    }
    //去评价
    const navigate = useNavigate()
    function toevaluate() {
        navigate('/mycenter/orderevaluate')
    }
    return (
        <div>
            <h3 className="tt">我的订单</h3>
            <div className='bill_main'>
                <ul className='bill_type clear'>
                    {
                        bill_type.map((bill_type, i) => {
                            return <li key={i} onClick={billTypeClick(i)}><span>{bill_type}</span><i>|</i></li>
                        })
                    }
                    <li>订单回收站</li>
                </ul>
                <ul className='bill_Lis'>
                    {
                        mybill.map((mybill, i) => {
                            return <li key={i}>
                                <div className='bill_heard'>
                                    <span>订单号：{mybill.b_num}</span>
                                    <span>下单日期:{mybill.crea_time}</span>
                                    <span style={{ color: '#6ca761' }}>{mybill.name}</span>
                                    <span>订单状态：<i style={{ color: '#f08200' }}>{mybill.b_site}</i></span>
                                </div>
                                <div className='bill_right'>
                                    <ul className='bill_good'>
                                        {
                                            mybill.good.map((goods, i) => {
                                                return <li key={i}>
                                                    <img src={goods.img} alt="" />
                                                    <span>{goods.title}</span>
                                                    <span>{goods.gui_ge}个装</span>
                                                    <span>￥{goods.new_price}x1</span>
                                                </li>
                                            })
                                        }
                                    </ul>
                                    <div className="zong_jia">
                                        <div>
                                            <span>店铺合计：￥{mybill.b_price}</span>
                                            <span>{'(包邮商品不含运费)'}</span>
                                        </div>
                                    </div>
                                    <div className='cao_zuo'>
                                        <div className={mybill.b_type === 1 ? 'show' : ''}>
                                            <Link to='/mycenter/orddet'>查看详情</Link>
                                            <span onClick={pay(mybill.b_id, mybill.b_price)}>去支付</span>
                                            <span style={{ backgroundColor: '#999999' }}>取消订单</span>
                                        </div>
                                        <div className={mybill.b_type === 2 ? 'show' : ''}>
                                            <Link to='/mycenter/orddet'>查看详情</Link>
                                            <span>申请退款</span>
                                        </div>
                                        <div className={mybill.b_type === 3 ? 'show' : ''}>
                                            <Link to='/mycenter/orddet'>查看详情</Link>
                                            <span>确认收货</span>
                                            <span>查看物流</span>
                                        </div>
                                        <div className={mybill.b_type === 4 ? 'show' : ''}>
                                            <Link to='/mycenter/orddet#'>查看详情</Link>
                                            <span onClick={refund(mybill.b_id, mybill.b_price)} >申请退款</span>
                                            <span onClick={toevaluate}>去评价</span>
                                            <span>交易完成</span>
                                        </div>
                                        <div className={mybill.b_type === 5 ? 'show' : ''}>
                                            <Link to='/mycenter/orddet'>查看详情</Link>
                                        </div>
                                        <div className={mybill.b_type === 6 ? 'show' : ''}>
                                            <Link to='/mycenter/orddet'>查看详情</Link>
                                            <span onClick={delbill(mybill.b_id)}>删除订单</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        })
                    }
                </ul>
            </div>
        </div>
    )
}
